<template>
  <header id='header' class="bg-white">
    <div class="container w-full h-full relative  flex justify-end">
      <div class="logo absolute flex items-center">
        <NuxtLink to="/" class="inline-block w-full h-full" @click="toTop">
          <img src="/imgs/index/header-logo.png"  class=""/>
        </NuxtLink>
        <!-- <div>熊猫不走生日蛋糕</div> -->
      </div>
      <div class="button" @click="changeShow" :class="rotateMenu ? 'menu-rotate' : ''"></div>
    </div>
    <van-popup 
      v-model:show="showPopup" 
      position="right" 
      safe-area-inset-top
      safe-area-inset-bottom
      transition-appear
      :style="{ height: '100%',backgroundColor: 'white',width: '70%',zIndex: 999*999 }" 
    >
      <div class="w-full h-full my-popup" >
        <div class="pop-logo flex items-center justify-center">
            <img src="/imgs/index/header-logo.png" class="w-full h-full" />
        </div>
        <ul class="c-current">
          <li 
            v-for="(item,index) in navList" 
            :key="item.to" 
            :class="{'no-bt' : index == 3, 'nav-slide': showPopup}" 
          >
            <NuxtLink :to="item.to" @click="navTo(index)" :class="currIndex == index ? 'c-current': ''" class="inline-block w-full h-full">{{ item.title }}</NuxtLink>
          </li>
        </ul>
      </div>
    </van-popup>
    <div class="absolute aside">
      <ul class="w-full h-full flex flex-col items-end">
        <li>
          <a href="https://j.youzan.com/4-z5P7" class="inline-block w-full h-full buy-cake">
            <img src="/imgs/index/buy-cake.png" alt="熊猫不走蛋糕商城" />
          </a>
        </li>
        <li>
          <a href="https://hzsxmbzhbyxgs3.qiyukf.com/client?k=7d1d2db2bef979175a273a8a1b4b1a9b&wp=1&robotShuntSwitch=0&shuntId=1104542&language=zh-cn"  target="_blank" class="inline-block w-full h-full">
            <img src="/imgs/index/serve.png" alt="熊猫不走客服" />
          </a>
        </li>
        <li class="to-top rounded-full"  v-show="canToTop" @click="toTop">
          <img src="/imgs/index/toTop.png" />
        </li>
      </ul>
    </div>
  </header>
</template>

<script lang='ts'>
import { useRoute } from 'vue-router'
export default { 
  setup() {
    const route = useRoute()
    const showPopup = ref(false)
    const rotateMenu = ref(false)
    const currIndex = ref(0)
    const canToTop = ref(false)
    const navList = ref([
      { to: '/',  title: '首页'},
      { to: '/cakes',  title: '美味蛋糕'},
      { to: '/news/1',  title: '新闻动态'},
      { to: '/about',  title: '关于我们'},
    ])
    const handlerScroll = () => {
      var myScrollTop = document.documentElement.scrollTop || document.body.scrollTop
      myScrollTop > 400 ? (canToTop.value = true) : (canToTop.value = false)
    }
    const toTop = () => {
      // 实现滚动效果
      var myTop = document.documentElement.scrollTop || document.body.scrollTop
      let timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = myTop -= 140
        if (myTop <= 0) {
          clearInterval(timeTop)
          timeTop = null
        }
      }, 10)
    }
    const backTop = ()=> {
      document.documentElement.scrollTop = 0
    }
    const navTo = index => {
      currIndex.value = index
      showPopup.value = false
      document.documentElement.scrollTop = 0
    }
    const changeShow = ()=> {
      rotateMenu.value = true
      setTimeout(() => {
        showPopup.value = true
      }, 100);
      setTimeout(() => {
        rotateMenu.value = false
      }, 800);
    }
    watch(
      () => route.fullPath,
      newVal => {
        if (newVal == '/') {
          currIndex.value = 0
        }
        if (newVal.includes('cake')) {
          currIndex.value = 1
        }
        if (newVal.includes('news')) {
          currIndex.value = 2
        }
        if (newVal.includes('about')) {
          currIndex.value = 3
        }
      },
      {
        immediate: true,
      }
    )
    onMounted(() => {
      window.addEventListener('scroll', handlerScroll, true)
    })
    return {
      showPopup, rotateMenu,
      currIndex,
      navList,
      navTo,
      changeShow,
      toTop, canToTop ,backTop
    }
  }
}

</script>

<style lang='scss'>
#header {
  position:sticky;
  top: 0;
  left: 0;
  z-index: 999;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f6f6f6;
  .container {
    padding: 5px 10px;
    .logo {
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      min-width: 149.71px;
      height: 26px;
      img {
        width: 154px;
        height: 24px;
      }
    }
    .button {
      width: 40px;
      height: 40px;
      background: url('/imgs/index/nav-menu.png') no-repeat;
      background-size: contain;
    }
  }
  .my-popup {
    .pop-logo {
      min-width: 150px;
      height: 26px;
      margin: 0 auto 31px;
      padding-top: 31px;
      img {
        // width: 100%;
        // height: 100%;
        width: 153px;
        height: 24px;
        // margin-right: 7.8px;
      }
    }
    ul {
      li {
        height: 50px;
        line-height: 50px !important;
        padding-left: 35px;
        font: 400 16px  'PingFang SC';
        color: #444243;
        border-bottom: 0.5px solid #666;
      }
      .no-bt {
        border: none;
      }
    }
  }
  .menu-rotate {
    animation: menu-rotate .2s forwards;
  }
  @keyframes menu-rotate {
    0% { transform: rotate(0) }
    100% { transform: rotateZ(90deg) }
  }
  .nav-slide {
    animation: nav-animation .4s forwards;
  }
  @keyframes nav-animation {
    0% { opacity: 0; transform: translateX(300px) }
    100% { opacity: 1; transform: translateX(0) }
  }
  .aside {
    top: 440px;
    right: 15px;
    width: 48px;
    height: 180px;
    z-index: 9*99;
    li {
      width: 49px;
      height: 49px;
      margin-bottom: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .to-top {
      animation: fade-in 0.5s linear forwards;
      @keyframes fade-in {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }
    }
  }
}
</style>